<template>
  <div class="app-container">
    <ul class="tab">
      <li v-for="(item, index) in tab" @click="change(item.id)" :class="idx == item.id ? 'on' : ''">{{ item.roomName
      }}
      </li>
      <li>
        <template>
          <el-form :inline="true" size="mini">
            <el-form-item>
              <el-select v-model="options.deptName" placeholder="选择店铺">
                <el-option v-for="item in options" :key="item.value" :label="item.id" :value="item.deptName"
                  @click="initShopData">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </template>

      </li>
    </ul>
    <div v-for="(item, index) in list">
      <p class="title">{{ item.roomName }}</p>
      <el-row :gutter="20" class="row">
        <div v-for="(item1, index1) in item.tTablenumbers">
          <el-col :span="6">
            <!-- pause -->
            <div class="item kaitong" @click="handle(item1.status,item,item1)">
              <div class="num">{{ item1.tablenumberId }}</div>
              <p><img src="@/assets/image/play.png" alt=""></p>
              <div v-if="item1.tOpenTable">{{ item1.tOpenTable.stopStatus == 0 ? '开桌中' : '已暂停' }} {{ item1.tOpenTable.useTime }}
              </div>
              <div v-if="item1.status == 0">未开桌</div>
              <div v-if="item1.status == 3">已开桌{{ item1.createTime }}</div>
              <i class="el-icon-question"></i>
            </div>
          </el-col>
        </div>
      </el-row>
    </div>

    <el-dialog title="开桌计时" :visible.sync="visible" width="500px">
      <timing :close.sync="visible" :room="room" :table="table"></timing>
    </el-dialog>
  </div>
</template>

<script>
import timing from './timing'
import { roomList, HuoQuShop } from "@/api/mahjong/room";
import { deskList, getShopData } from "@/api/mahjong/cost";
import { listConfig } from "@/api/system/config";

export default {
  name: "Online",
  components: { timing },
  data() {
    return {

      tab: [{ id: 0, roomName: '全部' }],
      list: [],
      idx: 0,
      visible: false,
      options: [{
      }]
    }
  },
  created() {
    this.initData();
    this.initShopData();

  },
  methods: {
    initShopData() {
      HuoQuShop(id).then(response => {
        this.tab = (response.data)
        console.log();
        // this.loading = false;
      }).then(() => {
        // this.msgSuccess(this.setInitMOney);
        this.msgSuccess("选择成功");
      }).catch(function () { });
    },
    handle(status,item,item1) {
      if (status == 0) {
        this.visible = true
        this.room=item
        this.table=item1

      }
    },
    initData() {
      this.loading = true;
      roomList({}).then(response => {
        this.tab = this.tab.concat(response.data)
        console.log(this.tab);
        this.loading = false;
      }
      );

      deskList({}).then(response => {
        this.list = response.data;
        console.log(this.tab);
        this.loading = false;
      }
      );
      getShopData().then(response => {
        this.options = response.data;
        console.log(this.tab);
        this.loading = false;
      }
      );
    },
    change(index) {

      if (this.idx === index || index === undefined) {
        return false;
      } else {
        this.idx = index;
        let query = { deskId: idx };
        deskList(query).then(response => {
          this.list = response.data;
          console.log(this.tab);
          this.loading = false;
        }
        );
      }
    },
    pause() {
      this.$confirm('确定要暂停吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已暂停，再次点击继续!'
        });
      })
    },
    open() {
      this.$confirm('确定结束维护吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已经结束维护!'
        });
      })
    },
    kxz() {
      this.$confirm('确定结束维护吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已经结束维护!'
        });
      })
    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.add {
  padding: 0 15px;
}

.app-container {
  padding: 0;

  .tab {
    background-color: #fff;
    padding: 10px 20px;
    position: relative;

    li {
      display: inline-block;
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #9C9186;
      font-size: 16px;
      cursor: pointer;

      &.on {
        background-color: #CAAB62;
        color: #fff;
        border-radius: 2px;
      }

      &:last-child {
        position: absolute;
        right: 47px;
        top: 8px;
        width: auto;

        .dianpu {
          background: #CAAB62;
          border-color: #CAAB62;
        }
      }

    }
  }

  .title {
    font-size: 18px;
    color: #201D1B;
    position: relative;
    padding: 20px 30px 15px;
    text-align: left;

    &::before {
      display: block;
      background-color: #CAAB62;
      width: 4px;
      height: 22px;
      content: '';
      position: absolute;
      left: 20px;
      top: 20px;
    }
  }

  .row {
    padding: 0 20px 20px;

    .item {
      border-radius: 4px;
      text-align: center;
      background-color: #fff;
      cursor: pointer;
      color: #292929;
      font-size: 14px;
      padding-bottom: 20px;
      margin-bottom: 20px;

      .num {
        height: 70px;
        line-height: 70px;
        background-color: #62CA6C;
        color: #fff;
        font-size: 40px;

      }

      p {
        margin: 20px auto 10px;
        background-color: #89D066;
        width: 80px;
        height: 80px;
        padding-top: 15px;
        border-radius: 6px;
      }

      &.kaitong {
        position: relative;

        .num,
        p {
          background-color: #CAAB62;
        }

        i {
          color: #CAAB62;
          position: absolute;
          bottom: 10px;
          right: 10px;
          font-size: 30px;
        }

      }

      &.weihu {
        .num {
          background-color: #CA6262;
        }

        p {
          background: #F56C6C;
        }
      }
    }
    .item:hover,
    .item:active,
    .item:visited {
      border: 4px solid #64CA62;
      padding-bottom: 12px;

      // .status{
      //   display: none;
      // }
      .detail {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

}
</style>
